<template>
	<view class="container">
		<view class="address-box" v-if="showAddress== true">
			<view class="address-item" @click="selectAddress" v-if="checkedAddress.contactListId > 0">
				<view class="l">
					<text class="name">{{checkedAddress.toName}}</text>
					<text class="default" v-if="checkedAddress.isDefault == 'Y'">默认</text>
				</view>
				<view class="m">
					<text class="mobile">{{checkedAddress.contactNumber}}</text>
					<text class="address">{{checkedAddress.address}}</text>
				</view>
				<view class="r">
					<image src="/static/images/address_right.png" />
				</view>
			</view>
			<view class="address-item address-empty" @click="addAddress" v-if="checkedAddress.contactListId <= 0">
				<view class="m">
					还没有收货地址，去添加
				</view>
				<view class="r">
					<image src="../../static/image/address_right.png" />
				</view>
			</view>
		</view>
		<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-if="couponList.length > 0" style="margin-bottom: 5upx;">
			<view class="uni-list-cell-navigate uni-navigate-right uni-navigate-badge">
				请选择优惠券
				<text class="txt">{{couponList.length}}张</text>
			</view>
		</view>
		
		<view class="uni-list-cell" hover-class="uni-list-cell-hover" style="margin-bottom: 5upx;" >
			<view class="uni-list-cell-navigate">
				商品合计
				<text class="txt">￥{{order.grandTotal}}</text>
			</view>
		</view>
		
		<view class="uni-list-cell" hover-class="uni-list-cell-hover" style="margin-bottom: 5upx;" v-if="deliverPrice > 0">
			<view class="uni-list-cell-navigate uni-navigate-right uni-navigate-badge">
				运费
				<text class="txt">￥{{deliverPrice}}</text>
			</view>
		</view>
		
		<view class="uni-list-cell" hover-class="uni-list-cell-hover" style="margin-bottom: 5upx;" v-if="couponPrice > 0">
			<view class="uni-list-cell-navigate uni-navigate-right uni-navigate-badge">
				优惠券
				<text class="txt">-￥{{couponPrice}}</text>
			</view>
		</view>

		<!-- <view class="coupon-box" v-if="couponList.length > 0">
			<view class="coupon-item">
				<view class="l">
					<text class="name">请选择优惠券</text>
					<text class="txt">{{couponList.length}}张</text>
				</view>
				<view class="r">
					<image src="/static/images/address_right.png" />
				</view>
			</view>
		</view> -->

	<!-- 	<view class="order-box">
			<view class="order-item">
				<view class="l">
					<text class="name">商品合计</text>
				</view>
				<view class="r">
					<text class="txt">￥{{order.grandTotal}}</text>
				</view>
			</view>
			<view class="order-item">
				<view class="l">
					<text class="name">运费</text>
				</view>
				<view class="r">
					<text class="txt">￥{{freightPrice}}</text>
				</view>
			</view>
			<view class="order-item no-border" v-if="couponPrice > 0">
				<view class="l">
					<text class="name">优惠券</text>
				</view>
				<view class="r">
					<text class="txt">-￥{{couponPrice}}</text>
				</view>
			</view>
		</view> -->
<!-- 
		<view class="goods-items">
			<view v-for="(item, index1) of order.orderItems" :key="item.orderItemSeqId" :data-index="index1">
				<view class="item" >
					<view class="img">
						{{item.orginalImageUrl}}
						<image :src="item.orginalImageUrl" />
					</view>
					<view class="info" >
						<view class="t">
							<text class="name">{{item.productName}}</text>
							<text class="number">x{{item.quantity}}</text>
						</view>
						<view class="m">{{item.productFeatureDescription}}</view>
						<view class="b">￥{{item.price}}</view>
					</view>
				</view>
			</view>
		</view> -->
		
		<view class="uni-list-cell" hover-class="uni-list-cell-hover" style="margin-bottom: 5upx;" >
			<view class="uni-list-cell-navigate">
				商品列表
				
			</view>
		</view>
		<view class="uni-flex uni-row" v-for="(item, index1) of order.orderItems" :key="item.orderItemSeqId" :data-index="index1" style="margin-bottom: 5upx; border-bottom:1px solid #E5E5E5">
			<view class="text" style="width: 200upx;height: 200upx;display: flex; justify-content: center;align-items: center;">
				<image :src="baseUrl+ item.orginalImageUrl" style="width: 150upx;height: 150upx;border:1px solid #E5E5E5"></image>
			</view>
			<view class="uni-flex uni-column" style="flex: 1;justify-content: space-between;">
				<view class="text" style="height: 60upx;text-align: left;padding-left: 20upx;padding-top: 10upx;">
					{{item.productName}}
				</view>
				<view class="text" style="height: 60upx;text-align: left;padding-left: 20upx;padding-top: 10upx;" v-if="item.productFeatureApplDesc  != undefined && item.productFeatureApplDesc.length > 0">
					{{item.productFeatureApplDesc}}
				</view>
				<view class="uni-flex uni-row">
					<view class="text" style="flex: 1;">￥{{item.unitListPrice}}</view>
					<view class="text" style="flex: 1;">X{{item.quantity}}</view>
				</view>
			</view>
		</view>
		
		<view class="uni-form-item uni-column">
			<view class="title">交易留言</view>
			<input class="uni-input" name="input" v-model="order.transactionMessage" placeholder="请输入交易留言" />
		</view>

		<view class="order-total">
			<view class="l" v-if="deliverPrice > 0">实付(含邮费)：￥{{actualPrice}}</view>
			<view class="l" v-else>实付：￥{{actualPrice}}</view>
			<view class="r" @click="submitOrder">确认订单</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex';
	import {
		getOrder,
		addOrder
	} from '@/api/buy/order'
	import {
		getStore,
		setStore,
		removeStore
	} from '@/common/util';

	export default {
		data() {
			return {
				checkedAddress: {
					contactListId: "",
				},
				order: {
					orderTypeId: 'SALES_ORDER',
					statusId: 'ORDER_CREATED',
					//#ifdef APP-PLUS
					terminalId: "",
					deviceId: "",
					//#endif
					
				},
				couponList: [],
				couponPrice: 0,
				deliverPrice: 0.0,
				goodsTotalPrice: 0.0,
				actualPrice: 0.0,
				remark: "",
				showAddress: true
			}
		},
		onLoad(e) {
			if(e.typeId == 1) {
				this.showAddress =false
			}
			this.initOrder();
		},
		onUnload() {
			this.order = {};
		},
		computed: {
			...mapGetters(
				["userId","defaultAddress"]
			),
			...mapState({
				cartItems: state => state.cart.cartItems,
				addresses: state => state.address.addresses,
			}),
		},
		mounted: function() {
			if(this.showAddress == true)
			{
				var addressId = getStore({
					name: '$sc_address_id'
				}) || "";
				
				if (addressId === undefined || addressId === null || addressId.length <= 0) {
					this.checkedAddress = this.defaultAddress;
				} else {
					this.checkedAddress = this.addresses.find(p => p.addressId == this.addressId)
				}
			}
			
		},
		onUnload() {
			this.showAddress = false;
			this.order = {};
		},
		onBackPress() {
			
		},
		methods: {
			selectAddress() {
				uni.navigateTo({
					url: '/pages/my/address'
				})
			},
// 			loadOrder(orderId) {
// 				getOrder(orderId).then(res => {
// 					if (res.status == 200 && res.rel == true) {
// 						this.order = res.data;
// 					} else {
// 						uni.showModal({
// 							title: '',
// 							content: '没有找到对应订单，需要返回吗？',
// 							success: async function(res) {
// 								if (res.confirm) {
// 									uni.navigateBack();
// 								}
// 							},
// 							})
// 					}
// 				});
// 			},
			initOrder() {
				this.order = getStore({name:"$sc_temp_order"});
				
				removeStore("$sc_temp_order");
				console.log("removeStore:"+JSON.stringify(getStore({name:"$sc_temp_order"}))),
				this.actualPrice = this.order.grandTotal
				for(var i = 0; i < this.order.orderItems; i++) {
					this.order.orderItems[i].createdBy = this.userId
				}
				if(this.showAddress == true)
				{
					if(this.order.grandTotal > 58) {
						this.actualPrice = this.order.grandTotal
						this.deliverPrice = 0.0
					} else {
						this.deliverPrice = 9.9
						this.actualPrice = this.order.grandTotal + this.deliverPrice
					}
				}
				//console.log(JSON.stringify(this.order))
				//goodsTotalPrice = this.order.orderItems.sum(p => p.unitListPrice*)
			},
			addAddress() {
				uni.navigateTo({
					url: '/pages/my/addaddress?typeId=1'
				})
			},
			submitOrder() {
				
				this.order.createdBy= this.userId;
				this.order.partyId = this.userId;
				this.order.grandTotal = this.actualPrice
				this.order.hasShippedAddress= this.showAddress
				this.order.deliverPrice = this.deliverPrice
				this.order.orderContactMech = {
					contactMechId: this.checkedAddress.contactListId,
					createdBy: this.userId,
					partyId: this.userId,
					toName: this.checkedAddress.toName,
					stateProvinceGeoId: this.checkedAddress.stateProvinceGeoId,
					city: this.checkedAddress.city,
					countyGeoId: this.checkedAddress.countyGeoId,
					contactNumber:this.checkedAddress.contactNumber,
					
				}
				console.log(JSON.stringify(this.order))
				uni.showLoading({
					title:"订单确认中....."
				})
				addOrder(this.order).then(response => {
					if(response.status == 200 && response.data !== null )
					{
							uni.navigateTo({
								url: '/pages/buy/pay?orderId='+response.data.orderId+ "&actualPrice=" + response.data.grandTotal
							})
					} else {
						uni.showToast({
							title: "确认订单出错，请重试！"
						})
					}
					uni.hideLoading()
					
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: "确认订单出错，请重试！"
					})
					
				});
			},
		}
	}
</script>

<style>
	.container {
		background: #fff;
	}
	.address-box {
		width: 750upx;
		height: 166.55upx;
		background: url('http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/address-bg-bd30f2bfeb.png') 0 0 repeat-x;
		background-size: 62.5upx 10.5upx;
		margin-bottom: 20upx;
		padding-top: 10.5upx;
	}

	.address-item {
		display: flex;
		height: 155.55upx;
		background: #fff;
		padding: 41.6upx 0 41.6upx 31.25upx;
	}

	.address-item.address-empty {
		line-height: 75upx;
		text-align: center;
	}

	.address-box .l {
		width: 125upx;
		height: 100%;
	}

	.address-box .l .name {
		margin-left: 6.25upx;
		margin-top: -7.25upx;
		display: block;
		width: 125upx;
		height: 43upx;
		line-height: 43upx;
		font-size: 30upx;
		color: #333;
		margin-bottom: 5upx;
	}

	.address-box .l .default {
		margin-left: 6.25upx;
		display: block;
		width: 62upx;
		height: 33upx;
		border-radius: 5upx;
		border: 1px solid #b4282d;
		font-size: 20.5upx;
		text-align: center;
		line-height: 29upx;
		color: #b4282d;
	}

	.address-box .m {
		flex: 1;
		height: 72.25upx;
		color: #999;
	}

	.address-box .mobile {
		display: block;
		height: 29upx;
		line-height: 29upx;
		margin-bottom: 6.25upx;
		font-size: 30upx;
		color: #333;
	}

	.address-box .address {
		display: block;
		height: 37.5upx;
		line-height: 37.5upx;
		font-size: 25upx;
		color: #666;
	}

	.address-box .r {
		width: 77upx;
		height: 77upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.address-box .r image {
		width: 52.078upx;
		height: 52.078upx;
	}

	.coupon-box {
		width: 100%;
		height: auto;
		overflow: hidden;
		background: #fff;
	}

	.coupon-box .coupon-item {
		width: 96%;
		height: 108.3upx;
		overflow: hidden;
		background: #fff;
		display: flex;
		padding-left: 31.25rpx;
	}

	.coupon-box .l {
		flex: 1;
		height: 43upx;
		line-height: 43upx;
		padding-top: 35upx;
	}

	.coupon-box .l .name {
		float: left;
		font-size: 30upx;
		color: #666;
	}

	.coupon-box .l .txt {
		float: right;
		font-size: 30upx;
		color: #666;
	}

	.coupon-box .r {
		margin-top: 15.5upx;
		width: 77upx;
		height: 77upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.coupon-box .r image {
		width: 52.078upx;
		height: 52.078upx;
	}

	.order-box {
		margin-top: 20upx;
		width: 750upx;
		height: auto;
		overflow: hidden;
		background: #fff;
	}

	.order-box .order-item {
		height: 104.3upx;
		overflow: hidden;
		background: #fff;
		display: flex;
		margin-left: 31.25upx;
		padding-right: 31.25upx;
		padding-top: 26upx;
		border-bottom: 1px solid #d9d9d9;
	}

	.order-box .order-item .l {
		float: left;
		height: 52upx;
		width: %;
		line-height: 52upx;
		overflow: hidden;
	}

	.order-box .order-item .r {
		float: right;
		text-align: right;
		width: 50%;
		height: 52upx;
		line-height: 52upx;
		overflow: hidden;
	}

	.order-box .order-item.no-border {
		border-bottom: none;
	}

	.goods-items {
		margin-top: 20rpx;
		width: 750upx;
		height: auto;
		overflow: hidden;
		background: #fff;
		padding-left: 31.25rpx;
		margin-bottom: 120rpx;
	}

	.goods-items .item {
		height: 192upx;
		padding-right: 31.25upx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	}

	.goods-items .item.no-border {
		border-bottom: none;
	}

	.goods-items .item:last-child {
		border-bottom: none;
	}

	.goods-items .img {
		height: 145.83upx;
		width: 145.83upx;
		background-color: #f4f4f4;
		margin-right: 20upx;
	}

	.goods-items .img image {
		height: 145.83upx;
		width: 145.83upx;
	}

	.goods-items .info {
		flex: 1;
		height: 145.83upx;
		padding-top: 5upx;
	}

	.goods-items .t {
		height: 33upx;
		line-height: 33upx;
		margin-bottom: 10upx;
		overflow: hidden;
		font-size: 30rpx;
		color: #333;
	}

	.goods-items .t .name {
		display: block;
		float: left;
	}

	.goods-items .t .number {
		display: block;
		float: right;
		text-align: right;
		margin-right: 30upx;
	}

	.goods-items .m {
		height: 29upx;
		overflow: hidden;
		line-height: 29upx;
		margin-bottom: 25upx;
		font-size: 25upx;
		color: #666;
	}

	.goods-items .b {
		height: 41upx;
		overflow: hidden;
		line-height: 41upx;
		font-size: 30upx;
		color: #333;
	}

	.order-total {
		position: fixed;
		left: 0;
		bottom: 0;
		height: 100upx;
		width: 100%;
		display: flex;
	}

	.order-total .l {
		flex: 1;
		height: 100upx;
		line-height: 100rpx;
		color: #b4282d;
		background: #fff;
		font-size: 33upx;
		padding-left: 31.25upx;
		border-top: 1upx solid rgba(0, 0, 0, 0.2);
		border-bottom: 1upx solid rgba(0, 0, 0, 0.2);
	}

	.order-total .r {
		width: 233upx;
		height: 100upx;
		background: #b4282d;
		border: 1px solid #b4282d;
		line-height: 100rpx;
		text-align: center;
		color: #fff;
		font-size: 30upx;
	}
</style>
